<!-- 三维预览 -->
<template>
  <div>
  </div>
</template>

<script setup>
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
import { lineBufferPolygon } from './polygontool.js'

const { proxy } = getCurrentInstance()
const map = proxy.$root.$map

onMounted(() => {
  // initMapboxDraw()
  // initDrawLayer()
})

// 加载展示图层
const loadShowLayer = (polygons, lines) => {
  // console.log('加载显示图层', lines)
  // 分线和面展示
  addPolygonLayer(polygons)
  addWallLayer(lines)
}

// 三维预览加载面图层
const addPolygonLayer = (polygons) => {
  const featureCollection = { 'type': 'FeatureCollection', 'features': polygons }
  console.log('加载显示图层', featureCollection)
  map.addSource('room-polygon-source', { 'type': 'geojson', 'data': featureCollection })
  //面层加样式
  map.addLayer({
    id: 'room-polygon',
    type: 'fill-extrusion',
    source: 'room-polygon-source',
    paint: {
      'fill-extrusion-color': ['get', 'color'],
      'fill-extrusion-height': ['get', 'height'],
      'fill-extrusion-base': 0,
      'fill-extrusion-opacity': 0.5
    }
  })
}
// 三维预览加载线图层
const addWallLayer = (lines) => {
  // 将线缓冲转成面
  const linePolygons = lineBufferPolygon(lines)
  const featureCollection = { 'type': 'FeatureCollection', 'features': linePolygons }
  console.log('加载显示图层', featureCollection)
  map.addSource('wall-polygon-source', { 'type': 'geojson', 'data': featureCollection })
  //面层加样式
  map.addLayer({
    id: 'wall-polygon',
    type: 'fill-extrusion',
    source: 'wall-polygon-source',
    paint: {
      'fill-extrusion-color': ['get', 'color'],
      'fill-extrusion-height': ['get', 'height'],
      'fill-extrusion-base': 0,
      'fill-extrusion-opacity': 0.5
    }
  })
}
// 删除图层
const removeLayer = () => {
  if (map.getLayer('room-polygon')) map.removeLayer('room-polygon')
  map.removeSource('room-polygon-source')
  if (map.getLayer('wall-polygon')) map.removeLayer('wall-polygon')
  map.removeSource('wall-polygon-source')
}

defineExpose({
  loadShowLayer,
  removeLayer
})

</script>

<style lang='scss' scoped>

</style>
